<template>
  <v-container fluid grid-list-md class="auth-config">
    <v-layout row wrap class="px-5">
      <v-flex md12>
        <v-btn icon @click="$router.push('/auth/role')">
          <v-icon>keyboard_backspace</v-icon>
        </v-btn>
        <span class="title">请选择「{{rolename}}」具有的系统权限</span>
      </v-flex>
    </v-layout>
    <v-divider></v-divider>
    <v-layout row wrap justify-center>
      <v-flex d-flex md4>
        <v-card height="480px">
          <v-toolbar color="orange darken-2" dark>
            <v-icon>lock_outline</v-icon>
            <v-toolbar-title>系统权限</v-toolbar-title>
          </v-toolbar>
          <!-- <v-list dense height="700px">
          <v-subheader>请选择角色具有的系统权限</v-subheader>
          <v-list-tile v-for="(tile, ind) of menuItems" :key="ind" avatar>
             <v-list-tile-action>
              <v-checkbox v-model="tile['checked']"></v-checkbox>
            </v-list-tile-action>
            <v-list-tile-content>
              <v-list-tile-title>{{tile.title}}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list> -->
          <v-list expand class="overflow-card">
            <v-list-group v-model="item.active" v-for="(item, index) in menuItems" :key="item.name">
              <!-- 父节点 -->
              <v-list-tile slot="activator">
                <v-list-tile-content>
                  <v-list-tile-title>
                    {{ item.name }}
                  </v-list-tile-title>
                </v-list-tile-content>
                <v-list-tile-action @click.stop="void 0;">
                  <v-checkbox v-model="item['checked']" @change="itemChanged(item, index)" :indeterminate="item.indeterminate"></v-checkbox>
                </v-list-tile-action>
              </v-list-tile>
              <!-- 子节点 -->
              <v-list-tile v-if="!subItem.notinmenu" v-for="(subItem, subindex) in item.children" :key="subItem.name">
                <v-list-tile-content>
                  <v-list-tile-title>{{ subItem.name }}</v-list-tile-title>
                </v-list-tile-content>
                <v-list-tile-action @click.stop="void 0;">
                  <v-checkbox v-model="subItem.checked" @change="subItemChanged(item, subItem, subindex)"></v-checkbox>
                </v-list-tile-action>
              </v-list-tile>
            </v-list-group>
          </v-list>
        </v-card>
      </v-flex>
      <v-flex md2 d-flex>
        <v-layout column align-center justify-center>
          <v-spacer></v-spacer>
          <v-icon size="84">swap_horiz</v-icon>
          <v-spacer></v-spacer>

        </v-layout>
      </v-flex>
      <v-flex d-flex md4>
        <!-- chip 显示方案 -->
        <!-- <v-card>
        <v-toolbar color="green accent-3" dark>
          <v-icon>lock_open</v-icon>
          <v-toolbar-title>用户权限</v-toolbar-title>
        </v-toolbar>
        <v-layout row wrap justify-center align-content-start class="px-3 py-5">
          <v-flex  md3 v-for="(tile, ind) of menuItems" :key="ind" v-if="tile.checked">
            <v-chip outline color="primary" v-model="tile.checked" close>{{tile.title}}</v-chip>
          </v-flex>
        </v-layout>
      </v-card> -->
        <!-- 同树形图显示方案 -->
        <v-card height="480px">
          <v-toolbar color="green accent-4" dark>
            <v-icon>lock_open</v-icon>
            <v-toolbar-title>用户权限</v-toolbar-title>
          </v-toolbar>
          <v-layout row wrap justify-center align-content-start>
            <v-flex md12>
              <v-list expand class="overflow-card">
                <v-list-group @click="void 0" v-model="expandList" v-for="item in menuItems" :key="item.name" :prepend-icon="item.action"
                  no-action v-show="item.checked">
                  <v-list-tile slot="activator">
                    <v-list-tile-content>
                      <v-list-tile-title>
                        {{ item.name }}
                      </v-list-tile-title>
                    </v-list-tile-content>
                  </v-list-tile>
                  <v-list-tile v-for="subItem in item.children" :key="subItem.name" v-show="subItem.checked">
                    <v-list-tile-content>
                      <v-list-tile-title>{{ subItem.name }}</v-list-tile-title>
                    </v-list-tile-content>
                    <v-list-tile-action @click.stop="void 0;">
                      <v-icon class="cursor" color="cyan darken-2" @click="setResources(subItem)" v-if="subItem.resource">more</v-icon>
                    </v-list-tile-action>
                  </v-list-tile>
                </v-list-group>
              </v-list>
            </v-flex>
          </v-layout>
        </v-card>
      </v-flex>
    </v-layout>
    <v-layout justify-center v-if="resourcesList.length">
      <v-flex md10>
        <v-card height="200px" class="px-3 py-3">
          <v-layout row wrap>
            <v-flex md2>
              <v-checkbox v-for="(item,i) of resourcesList" :key="i" v-model="item.checked" :label="item.name">
              </v-checkbox>
            </v-flex>
          </v-layout>

        </v-card>
      </v-flex>
    </v-layout>
    <v-layout justify-end class="pr-5">
      <v-spacer></v-spacer>
      <v-flex md3>
        <v-btn color="light-blue" class="title px-3" round dark @click="confirmAuthConfig">
          <v-icon>check</v-icon>
          <span>确认</span>
        </v-btn>
        <v-btn color="red accent-3" class="title px-3" round dark @click="$router.push('/auth/role')">
          <v-icon>clear</v-icon>
          <span>取消</span>
        </v-btn>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import { buildMenu } from "../../util";
import * as auth from "../../api/auth";
import access from "../accessConfig";
export default {
  data: () => ({
    dialog: false,
    notifications: false,
    rolename: "管理员",
    menuItems: [],
    tilesChecked: [],
    checked: [],
    itemChecked: [],
    subitemChecked: [],
    expandList: true,
    resourcesList: []
  }),
  mounted() {
    // this.getMenus()
    this.menuItems = this.getMenus(access);
    this.rolename = this.$route.query.role;
    // 发送id过去
  },
  computed: {},
  watch: {
    $route(to, from) {}
  },
  methods: {
    // 确认选择的权限
    confirmAuthConfig() {
      // 将menuItems遍历，选择已checked的
      let routes = [];
      let resource = [];
      let tree = this.menuItems.slice();
      tree.forEach(function(item) {
        if (item.checked) {
          routes.push({
            id: item.id,
            parent_id: null,
            name: item.name,
            route: item.route
          });
          if (item.children) {
            item.children.forEach(function(child) {
              if (child.checked) {
                if (child.resource) {
                  child.resource.forEach(function(src) {
                    if (src.checked) {
                      resource.push({
                        id: src.id,
                        name: src.name,
                      });
                    }
                  });
                }
                routes.push({
                  id: child.id,
                  parent_id: item.id,
                  name: child.name,
                  route: child.route
                });
              }
            });
          }
        }
      });
      console.error(routes);
    },
    itemChanged(item, index) {
      console.log(item.title, item.checked, item.indeterminate);
      // 选择父元素则同时勾选子元素 反之亦然
      this.tilesChecked[index] = item;
      if (item.children) {
        _.forEach(item.children, child => {
          this.$set(child, "checked", item.checked);
        });
      }
      if (!item.checked) {
        this.$set(item, "indeterminate", false);
      }
    },
    subItemChanged(item, subItem, subindex) {
      // 统计子选项是否有被点中
      let indeterminate = 0;
      _.forEach(item.children, child => {
        if (child.checked) {
          indeterminate++;
        }
      });
      this.$set(
        item,
        "indeterminate",
        indeterminate > 0 && indeterminate < item.children.length
      );
      this.$set(item, "checked", indeterminate > 0);
      // 未选全部时checkbox为横线
    },
    // 设置内容页具体资源
    setResources(subItem) {
      this.resourcesList = subItem.resource || [];
      console.log(subItem);
    },
    getMenus(config) {
      return buildMenu(config.menus);
    }
  }
};
</script>

<style lang="less" scoped>
.overflow-card {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 400px;
}
// .absolute-buttons{
//   position: relative;
//   .md3{
//     position: absolute;
//     right: 60px;
//     top: 10px;
//   }
// }
</style>

